<template>
    <div class="basic-layout">
        <!-- 顶部导航栏 -->
        <Header />

        <!-- 主要内容区域 -->
        <main class="main-content">
            <router-view v-slot="{ Component }">
                <transition name="page" mode="out-in">
                    <component :is="Component" />
                </transition>
            </router-view>
        </main>

        <!-- 底部信息 -->
        <Footer />
    </div>
</template>

<script setup lang="ts">
import Footer from "./components/footer/index.vue";
import Header from "./components/header/index.vue";
</script>

<style scoped lang="scss">
// 类名前缀 (page-) 必须与 <transition name="page">中的 name属性一致
// enter-from/leave-to定义动画起始状态
// enter-active/leave-active定义过渡时间和曲线
.page-enter-active,
.page-leave-active {
    transition: 300ms ease all;
}

.page-enter-from,
.page-leave-to {
    opacity: 0;
    transform: translateX(50px);
}
</style>
